Закладки

Флэт-иллюстрация

Основные принципы. Иллюстрация, как важный компонент Flat Design. Примеры. Полезные советы
Если посмотреть на современные тенденции в дизайне, можно выделить один большой тренд, который называется Flat Design (плоский дизайн). Каждому, кто хочет, чтобы его дизайн был актуален, необходимо знать об этом понятии, научиться его использовать и применять это знание в своей работе.

Flat иллюстрация — часть такого направления, как плоский дизайн.
1

Плоский дизайн

Плоский дизайн (англ. flat design) — минималистичный подход к оформлению сайтов, мобильных приложений и печатных изданий, целью которого является сделать эстетически приятный, легкий в использовании продукт.

Такое название он получил потому, что он существует в двухмерном пространстве, то есть он плоский. Для плоского дизайна характерны простой и понятный интерфейс, грамотно подобранные шрифты и приятная цветовая палитра.

Плоский дизайн пришел на смену понятию «скевоморфизм». Скевоморфизм — такой стиль, когда все элементы максимально реалистичны и выглядят, как настоящие. Считалось, что человеку легче разобраться с компьютерным интерфейсом, если он будет похож на настоящий объект. Но, как и многое другое, это направление в дизайне устарело и на смену ему пришло тотальное упрощение. Можно сказать, что плоский дизайн является частью одного глобального тренда. В эпоху переизбытка информации и постоянной суеты общество стремится к упрощению того, что его окружает.
Переход от скевоморфизма в iOS 6 к плоскому дизайну в iOS 7 в дизайне иконок Apple

Материальный дизайн

Материальный дизайн (англ. material design) является своеобразным развитием плоского дизайна, был представлен общественности компанией Google летом 2014 года. Их целью являлось создать визуальный язык, который включает в себя хороший дизайн и возможности современных технологий и науки; разработку системы, предоставляющей единое восприятие контента на устройствах различных размеров. Материальный дизайн позволяет пользователю мгновенно понять базовый функционал интерфейса.
Подробнее про материальный дизайн можно прочитать на официальном сайте Google.
2

Примеры использования Flat Illustration

Плоская иллюстрация на посадочных страницах

Прежде всего, плоский дизайн встречается в web — это посадочные страницы всевозможных сервисов и услуг. Иллюстрация применяется на обложке сайта или может быть визуальным обозначением функций, свойств продукта.

Также Flat иллюстрация применяется в интерфейсе web-сервисов в качестве иконок, подсказок по эксплуатации сайта, иллюстраций того или иного продукта. Это встречается в таких сервисах, как Google, Dropbox, различные интернет-банки.
Применение Flat иллюстрации также можно встретить в разнообразных информационных сайтах. Например, бейджик новости может быть проиллюстрирован как фотографией, так и иллюстрацией. Также портрет автора статьи в виде иконки.

И вместо того, чтобы каждый раз к новой статье подбирать фотографию или рисовать иллюстрацию, что выходит довольно дорого, наблюдается тенденция применения определенного сета иконок или иллюстраций к той или иной тематике статей. Это позволяет качественно и легко иллюстрировать новые статьи, не затрачивая на это значимых усилий и средств.

Плоская иллюстрация в web-интерфейсах

Плоская иллюстрация в мобильных приложениях

Плоская иллюстрация в мобильных приложениях встречается в качестве так называемой Onboarding Page. Это приветствующая страница при первом запуске приложения, которая иллюстрирует функции этого приложения или содержит объяснения, как им пользоваться.
И еще одно применение плоского дизайна в мобильных приложениях это, конечно же, иконки в интерфейсе, как обозначение рубрик, разделов меню и функций или действий.

Плоская иллюстрация в печати

Flat иллюстрация используется в печатных изданиях. Она может быть помещена на обложке или в контенте статей.

Плоская иллюстрация в инфографике

Широко применяется Flat иллюстрация и в инфографике. С помощью нее можно легко продемонстрировать сложный механизм или схему, заменив сложно описываемые элементы иллюстрированными примерами, что поможет пользователю быстрее усвоить информацию.
Infographics by Forma & Co

Плоская иллюстрация в фирменном стиле

Плоский дизайн может быть основой фирменного стиля компании как дизайн упаковки, документации, рекламы компании и прочего.

Плоская иллюстрация в навигационных системах

Можно увидеть применение Flat дизайна в системах навигации, таких, как городская навигация в метро, аэропорту, музеях, парках; автомобильная навигация и другие.

Где искать примеры иллюстраций

Во первых, хорошие примеры часто встречаются на behance.net. Там можно отфильтровать выкладываемые проекты и найти множество классных образцов Flat иллюстрации. Можно искать иллюстрации, иконки и интерфейсы на pinterest.com. Там вы найдете всевозможные коллекции по различным тематикам, а также сможете собирать свои коллекции из понравившихся вам изображений, установив Pinterest Button на свой браузер. Эта кнопка позволяет сохранять изображения из интернета с ссылками на источники, это очень удобно. Еще один сайт, где есть интересные вещи для вдохновения, это dribbble.com.

На designerboard.co тоже собраны качественные примеры плоского дизайна с ссылками на Behance и Dribble.

И также можно посмотреть такие ресурсы, как awwwards.com, land-book.com, на них собрано множество сайтов Start Up, которые активно используют плоский дизайн в своих интерфейсах. Еще есть такой замечательный портал flatinspire.com, на нем можно искать сайты по разным, упрощающим поиск категориям, например, по конкретному цвету или типу шрифта.

А чтобы найти красивые приложения, нужно заходить в App Store или Google Play и скачивать любые приложения, в которых могут встретиться стильные иконки или Onboarding Pages.
By Loulou and Tummie
3

Основные принципы плоского дизайна


By Jonathan Calugi
Чтобы понять, как рисовать иллюстрацию и избежать ошибок, следует сначала изучить основные принципы плоского дизайна и посмотреть качественные примеры.

Казалось бы, в Flat дизайне нет ничего сложного, и сделать его легко. Но чем меньше элементов в дизайне, тем сложней их скомпоновать, любая малейшая неточность видна как на ладони.

Ниже приведены основные признаки плоского дизайна, о которых следует помнить при создании продукта в этом стиле.

Простота

Все элементы дизайна просты и лаконичны, отсутствуют эффекты объема или глубины; текстур; бликов. Использование интерфейса должно быть интуитивно понятным пользователю. Присутствуют объекты только с простыми формами. Ничего не утяжеляет дизайн, и каждая деталь делает его максимально удобным и понятным. Существует такое понятие «Хороший интерфейс, это тот, который ты не замечаешь».

Практичность

При минимальном количестве графики дизайн должен быть максимально информативен. Пользователь должен легко и быстро находить необходимую ему информацию и без труда пользоваться интерфейсом. Для большего удобства информация распределяется блоками в определенном продуманном порядке. Активно используется инфографика, кнопки и иконки, что повышает интерактивность дизайна и удобство его считывания.

Минимализм

Нет никаких лишних отвлекающих эффектов, сложной навигации, перегруженности деталями. Все элементы дизайна тщательно продуманы, выдержаны в одном стиле и дополняют друг друга. Между объектами должно быть много свободного пространства, так блоки информации будут легче восприниматься пользователем.

Тщательно подобранная типографика

Графика плоского дизайна максимально проста, шрифты имеют повышенное значение.
Характер шрифта дополняет общий стиль и композицию. Не стоит нагружать дизайн большим количеством разных шрифтов, достаточно использовать один или два с некоторыми вариациями размера и толщины. Особенно в Flat дизайне актуальны так называемые ультратонкие шрифты (X-thin types). Опять же, нужно не забывать о свободном пространстве между блоками текста.
By Chu-Chieh Lee, Behance Japan and Matteo Morelli

Продуманная подборка цветов

В Flat дизайне цвет играет немаловажную роль. Помимо ахроматических* цветов можно смело использовать яркую легкую палитру. Чаще всего это светлые чистые цвета, возможны некоторые изменения оттенков и прозрачности цвета. Но важно не переборщить с количеством цветов, лучше, чтобы их было не больше 2–4.

На flatuicolorpicker.com и google.com/design/spec/style/color вы
можете посмотреть палитры цветов, которые часто применяются в плоском дизайне.
*Ахроматические цвета — цвета, не входящие в цветовой спектр, то есть черный, белый и все оттенки серого.
By Tom Haugomat

Активное использование иллюстрации

Поскольку восприятие визуальной информации происходит быстрее и легче, чем вербальной или письменной, иллюстрация широко применяется в плоском дизайне. Она успешно заменяет письменные обозначения и делает дизайн более информативным и легким в использовании.

Иллюстрация используется в дизайне в виде иконок, оформления обложек, а также применяется в инфографике.
4

Иконки

Иконка — это максимально упрощенное изображение того или иного объекта или действия.

Они иллюстрируют действие и выражают его более простым способом, чем слово, что ускоряет процесс восприятия информации. Используются для обозначения разделов сайта, кнопок интерфейса и многого другого. Иконки должны быть запоминающимися, понятными и легко считываемыми. Иконка может состоять из одного или нескольких объектов, которые составляют гармоничную композицию.

Часто можно встретить иконки, нарисованные на определенную тематику и объединенные в сеты, состоящие из нескольких штук или из нескольких десятков.
Основой дизайна иконок служат простые геометрические формы, из комбинации которых составляется изображение. Характерным признаком Flat иконки является то, что в итоге она нарисована контуром, с заливкой или без нее. Они изображаются как самостоятельно, так и вписываются в какую-либо простую фигуру, например, круг или квадрат. Если иконка в фигуре, она должна располагаться строго в ее центре.

Где найти красивые иконки

Поскольку иконки сейчас актуальны и широко используются, появилось много стоков, где можно купить целые сеты иконок, или использовать их бесплатно, указав имя автора.
Много разнообразных иконок есть на thenownprogect.com. В нем в поиск можно забить любое слово, например «дом» или «музыка», и вам откроется огромное количество иконок в разных стилях и вариациях, в тегах которых проставлено это ключевое слово.

На fortawesome.github.io также можно найти много коллекций иконок, которые часто используются в интерфейсах, и их можно оттуда бесплатно взять и использовать в своем дизайне.

Компания Google сделала прекрасно проиллюстрированное и структурированное руководство по созданию иконок в материальном стиле, большинство информации из которого можно отнести к плоскому дизайну.
5

Различные техники рисования

По принципам плоского дизайна в иллюстрации используется минимум деталей и локальная заливка элементов.

Объекты рисуются с помощью заливки, контура или того и другого.

С одной стороны иллюстрации в стиле Flat похожи друг на друга, так как рисуются в одном стиле, но, на самом деле, есть много всевозможных вариаций рисования Flat иллюстрации. И можно, не выходя за рамки этого стиля, нарисовать иллюстрацию так, чтобы она не была похожа на другие.
By Burnt Toast Creative

Тени

Подчеркнуть объект можно с помощью тени. В Flat дизайне тени рисуются с четкими краями без рассеивания и имеют наклон строго на 45 градусов относительно объекта. Чаще всего тень падает в нижний правый угол.
By Bloomua Studio

Изометрическая проекция

Если необходимо продемонстрировать объект в 3D пространстве, в Flat иллюстрации используется изометрическая проекция. Это единственный случай, когда объекты в плоском дизайне изображаются не в двухмерном пространстве.

Изометрическая проекция также используется в технической графике, компьютерных играх, анимации и в Pixel Art.
By Burnt Toast Creative

Частичное использование контура

С помощью такой техники можно распределить акценты на важных компонентах иллюстрации.

Сдвиг заливки относительно контура

By Iryna Derenska

Наложение цветов

By Roberto Blefari
By MUTI

Тонирование паттерном

By Gennaro Lewis
By Sean Mort

Ксения Копалова
Иллюстратор
Здорово, научившись стряпать чистенькие и аккуратные векторные картинки, на этом не застрять. Все ограничения флэта, составляющие его как тренд, можно использовать как отправную точку для дальнейшей работы.

Есть, к примеру, такие весельчаки, как Simon Landrein:

HELF from simon landrein on Vimeo.

Вроде и заливочки тут тебе, и контуры, и паттерны — всё как по туториалу, но насколько это шире, чем «флэт» как таковой. Такие штуки живы, даже если тренд давно ушел. Или вот: Wong Ping. Полный отвал башки. К флэту имеет уж вовсе косвенное отношение, хотя формально — тот же вектор, те же шейпы ведь.
6

Заключение

Дизайнерам и заказчикам необходимо начать использовать иллюстрацию в своих проектах, научиться работать с иллюстратором, использовать не только иконки, применять разные виды иллюстрации в контенте.

Если иллюстратор хочет быть востребован, ему нужно освоить и применять плоский дизайн в своей работе, не зацикливаться на поисках своего уникального стиля. Экспериментировать с техниками, развиваться, вносить что-то новое, изучать работы талантливых иллюстраторов, брать с них пример.

Flat дизайн — это пространство для творчества, где каждый может найти новые возможности для самореализации.
Автор: Юлия Засс


Все используемые в статье иллюстрации принадлежат их владельцам.

Также в этом курсе

8
Развитие визуального вкуса и получение нового опыта
Какие качества нужно развивать дизайнеру, чтобы добиться профессионального роста.
Предыдущая
10
Композиция
Свойства формы и приемы для работы над композицией
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc